
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='content'>
        请输入数字：<input id="num" type="text" />
        <input type="submit" onclick="calculate()"/>
        <p class="tip"></p>
        <p class="result"></p>
    </div>
</body>
<script>
    function calculate() {
        var num = document.getElementById("num");
        var result = document.getElementsByTagName("p");

        var value = Number(num.value);
        var dataType = typeof value;
        
        if ( isNaN(value) || dataType != "number") {
            result[0].innerHTML = "输入不是数字！";
            return;
        } 
        if ( value < 0 || value > 100) {
            result[0].innerHTML = "输入数字范围不符合要求！";
            return;
        }

        console.log(value);
        result[0].innerHTML = "";
        // 打印全部正整数
        for (let i = 1; i <= value; i++) {
            result[1].innerHTML += i + '<br />';
        }
    }
</script>
</html>